<template>
  <view class="add-invoice-container">
    <view class="content">
      <view class="color-bg-fff margin-10 padding-15 border-radius-10 shadow">
        <!-- 抬头类型选择 -->
        <view class="header-type-selector">
          <text class="selector-label">抬头类型</text>
          <u-radio-group v-model="headerType" direction="row" @change="onHeaderTypeChange">
            <u-radio :value="'2'" label="个人" name="2"></u-radio>
            <u-radio :value="'1'" label="企业单位" name="1"></u-radio>
          </u-radio-group>
        </view>
        <u-line margin="10rpx 0"></u-line>
        
        <!-- 企业单位表单 -->
        <u-form v-if="headerType === '1'" :model="companyForm" ref="companyFormRef" :rules="companyRules" label-width="120" label-align="left">
          <u-form-item label="公司名称" prop="companyName" required>
            <u-input v-model="companyForm.companyName" placeholder="请输入公司名称" maxlength="100" border="none"></u-input>
          </u-form-item>
          <u-line margin="10rpx 0"></u-line>
          
          <u-form-item label="公司税号" prop="taxNumber" required>
            <u-input v-model="companyForm.taxNumber" placeholder="请输入公司税号" maxlength="50" border="none"></u-input>
          </u-form-item>
          <u-line margin="10rpx 0"></u-line>
          
          <u-form-item label="注册地址" prop="registeredAddress">
            <u-input v-model="companyForm.registeredAddress" placeholder="请输入注册地址" maxlength="200" border="none"></u-input>
          </u-form-item>
          <u-line margin="10rpx 0"></u-line>
          
          <u-form-item label="注册电话" prop="registeredPhone">
            <u-input v-model="companyForm.registeredPhone" placeholder="请输入注册电话" maxlength="20" border="none"></u-input>
          </u-form-item>
          <u-line margin="10rpx 0"></u-line>
          
          <u-form-item label="开户银行" prop="bankName">
            <u-input v-model="companyForm.bankName" placeholder="请输入开户银行" maxlength="100" border="none"></u-input>
          </u-form-item>
          <u-line margin="10rpx 0"></u-line>
          
          <u-form-item label="银行账号" prop="bankAccount">
            <u-input v-model="companyForm.bankAccount" placeholder="请输入银行账号" maxlength="50" border="none"></u-input>
          </u-form-item>
          <u-line margin="10rpx 0"></u-line>
          
          <!-- 提交按钮 -->
          <u-form-item>
            <u-button type="primary" shape="circle" :loading="submitting" @click="handleCompanySubmit">
              {{ submitting ? '保存中...' : '保存' }}
            </u-button>
          </u-form-item>
        </u-form>
        
        <!-- 个人表单 -->
        <u-form v-else :model="personalForm" ref="personalFormRef" :rules="personalRules" label-width="120" label-align="left">
          <u-form-item label="个人名称" prop="personalName" required>
            <u-input v-model="personalForm.personalName" placeholder="请输入个人名称" maxlength="50" border="none"></u-input>
          </u-form-item>
          <u-line margin="10rpx 0"></u-line>
          
          <!-- 提交按钮 -->
          <u-form-item>
            <u-button type="primary" shape="circle" :loading="submitting" @click="handlePersonalSubmit">
              {{ submitting ? '保存中...' : '保存' }}
            </u-button>
          </u-form-item>
        </u-form>
      </view>
    </view>
  </view>
</template>

<script>
import { addInvoiceHeader } from '@/api/course/invoiceHeader'

export default {
  data() {
    return {
      submitting: false,
      headerType: '2', // 默认个人
      // 企业表单
      companyForm: {
        companyName: '',
        taxNumber: '',
        registeredAddress: '',
        registeredPhone: '',
        bankName: '',
        bankAccount: ''
      },
      companyRules: {
        companyName: [
          { required: true, message: '请输入公司名称', trigger: 'blur' },
          { min: 2, max: 100, message: '公司名称长度在2到100个字符', trigger: 'blur' }
        ],
        taxNumber: [
          { required: true, message: '请输入公司税号', trigger: 'blur' },
          { min: 15, max: 20, message: '税号长度在15到20个字符', trigger: 'blur' }
        ],
        registeredAddress: [
          { max: 200, message: '注册地址不能超过200个字符', trigger: 'blur' }
        ],
        registeredPhone: [
          { pattern: /^1[3-9]\d{9}$|^0\d{2,3}-?\d{7,8}$/, message: '请输入正确的电话号码', trigger: 'blur' }
        ],
        bankName: [
          { max: 100, message: '开户银行不能超过100个字符', trigger: 'blur' }
        ],
        bankAccount: [
          { pattern: /^\d{16,19}$/, message: '请输入正确的银行账号', trigger: 'blur' }
        ]
      },
      // 个人表单
      personalForm: {
        personalName: ''
      },
      personalRules: {
        personalName: [
          { required: true, message: '请输入个人名称', trigger: 'blur' },
          { min: 2, max: 50, message: '个人名称长度在2到50个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 抬头类型切换
    onHeaderTypeChange(value) {
      // 清空对应表单数据
      if (value === '1') {
        // 切换到企业单位，清空个人表单
        this.personalForm.personalName = ''
      } else {
        // 切换到个人，清空企业表单
        this.companyForm.companyName = ''
        this.companyForm.taxNumber = ''
        this.companyForm.registeredAddress = ''
        this.companyForm.registeredPhone = ''
        this.companyForm.bankName = ''
        this.companyForm.bankAccount = ''
      }
    },
    
    // 企业表单提交
    async handleCompanySubmit() {
      try {
        // 企业表单验证
        await this.$refs.companyFormRef.validate()
        
        this.submitting = true
        
        // 准备企业数据
        const submitData = {
          headerType: 1,
          companyName: this.companyForm.companyName.trim(),
          taxNumber: this.companyForm.taxNumber.trim(),
          registeredAddress: this.companyForm.registeredAddress.trim(),
          registeredPhone: this.companyForm.registeredPhone.trim(),
          bankName: this.companyForm.bankName.trim(),
          bankAccount: this.companyForm.bankAccount.trim()
        }
        
        // 提交数据
        await addInvoiceHeader(submitData)
        
        this.$modal.showToast('保存成功')
        
        // 返回上一页
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
        
      } catch (error) {
        console.error('保存企业发票抬头失败:', error)
        this.$modal.showToast('保存失败，请重试')
      } finally {
        this.submitting = false
      }
    },
    
    // 个人表单提交
    async handlePersonalSubmit() {
      try {
        // 个人表单验证
        await this.$refs.personalFormRef.validate()
        
        this.submitting = true
        
        // 准备个人数据
        const submitData = {
          headerType: 2,
          personalName: this.personalForm.personalName.trim()
        }
        
        // 提交数据
        await addInvoiceHeader(submitData)
        
        this.$modal.showToast('保存成功')
        
        // 返回上一页
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
        
      } catch (error) {
        console.error('保存个人发票抬头失败:', error)
        this.$modal.showToast('保存失败，请重试')
      } finally {
        this.submitting = false
      }
    }
  }
}
</script>

<style scoped>
.add-invoice-container {
  min-height: 100vh;
  background: #f8f9fa;
}

.content {
  padding: 0;
}

/* 抬头类型选择器样式 */
.header-type-selector {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding: 20rpx 0;
}

.selector-label {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  min-width: 120rpx;
}

/* 表单项样式调整 */
:deep(.u-form-item) {
  padding: 20rpx 0;
}

:deep(.u-form-item__label) {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

:deep(.u-input) {
  padding: 20rpx 0;
}

:deep(.u-textarea) {
  padding: 20rpx 0;
}

:deep(.u-radio-group) {
  display: flex;
  gap: 40rpx;
}

:deep(.u-radio) {
  display: flex;
  align-items: center;
  gap: 8rpx;
}
</style>
